<!-- pages/question-bank/exam-detail.vue -->
<template>
  <view class="container">
    <!-- 顶部区域 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="iconfont icon-back">←</text>
      </view>
      <text class="title">试卷详情</text>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
    </view>

    <!-- 试卷内容 -->
    <view v-else-if="exam" class="exam-content">
      <!-- 试卷信息卡片 -->
      <view class="exam-card">
        <text class="exam-title">{{ exam.title }}</text>
        <view class="exam-tags">
          <view class="tag difficulty">
            <text>难度: </text>
            <view class="stars">
              <text 
                v-for="n in 5" 
                :key="n" 
                class="star" 
                :class="{ active: n <= exam.difficultyLevel }"
              >★</text>
            </view>
          </view>
          <view class="tag">题目数量: {{ exam.questionCount }}</view>
          <view class="tag">总分: {{ exam.totalScore }}分</view>
        </view>
        <view class="exam-info">
          <text class="info-label">考试时长:</text>
          <text class="info-value">{{ exam.duration }}分钟</text>
        </view>
        <view class="exam-info">
          <text class="info-label">及格分数:</text>
          <text class="info-value">{{ exam.passingScore }}分</text>
        </view>
        <view class="exam-info">
          <text class="info-label">试卷描述:</text>
          <text class="info-value description">{{ exam.description || '暂无描述' }}</text>
        </view>
      </view>

      <!-- 试卷规则 -->
      <view class="rules-card">
        <text class="card-title">考试规则</text>
        <view class="rule-item">
          <text class="rule-icon">✓</text>
          <text class="rule-text">题目{{ exam.randomOrder ? '随机排序' : '固定排序' }}</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">✓</text>
          <text class="rule-text">{{ exam.allowReview ? '允许考后查看答案解析' : '不允许考后查看答案' }}</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">✓</text>
          <text class="rule-text">考试中途退出视为交卷</text>
        </view>
        <view class="rule-item">
          <text class="rule-icon">✓</text>
          <text class="rule-text">使用答题卡可快速切换题目</text>
        </view>
      </view>

      <!-- 开始考试按钮 -->
      <view class="action-buttons">
        <button class="primary-btn" @tap="startExam">开始考试</button>
        <button class="secondary-btn" @tap="previewExam">试卷预览</button>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error-state">
      <image src="/static/icons/error.png" mode="aspectFit" class="error-icon"></image>
      <text class="error-text">加载试卷失败，请稍后重试</text>
      <button class="retry-btn" @tap="fetchExamDetail">重试</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { request } from '@/utils/request'

// 组件状态
const loading = ref(true)
const exam = ref(null)
const examId = ref(null)

const loadingText = {
  contentdown: '加载更多',
  contentrefresh: '正在加载...',
  contentnomore: '没有更多数据了'
}

// 初始化
onMounted(() => {
  // 获取路由参数
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.$page?.options
  
  if (options && options.examId) {
    examId.value = parseInt(options.examId)
    fetchExamDetail()
  } else {
    showErrorToast('无法获取试卷信息')
    loading.value = false
  }
})

// 获取试卷详情
const fetchExamDetail = async () => {
  loading.value = true
  try {
    const res = await request({
      url: `/exam/detail/${examId.value}`,
      method: 'GET'
    })
    
    if (res.code === 200 && res.data) {
      exam.value = res.data
    } else {
      showErrorToast('获取试卷详情失败')
      exam.value = null
    }
  } catch (error) {
    console.error('获取试卷详情错误:', error)
    showErrorToast('网络错误，请稍后重试')
    exam.value = null
  } finally {
    loading.value = false
  }
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 开始考试
const startExam = () => {
  uni.navigateTo({
    url: `/pages/exam/start?examId=${examId.value}`
  })
}

// 预览试卷
const previewExam = () => {
  uni.navigateTo({
    url: `/pages/exam/preview?examId=${examId.value}`
  })
}

// 显示错误提示
const showErrorToast = (message) => {
  uni.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  })
}
</script>

<style>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

.header {
  background-color: #fff;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  font-size: 40rpx;
  font-weight: bold;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
  color: #333;
}

.loading {
  padding: 100rpx 0;
  text-align: center;
}

.exam-content {
  padding: 20rpx;
}

.exam-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.exam-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.exam-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30rpx;
}

.tag {
  background-color: #f5f7fa;
  color: #666;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
}

.difficulty {
  background-color: #fff8e6;
  color: #f0ad4e;
}

.stars {
  display: flex;
  margin-left: 4rpx;
}

.star {
  font-size: 24rpx;
  color: #ddd;
  margin-right: 2rpx;
}

.star.active {
  color: #FFD700;
}

.exam-info {
  margin-bottom: 20rpx;
  display: flex;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.description {
  line-height: 1.6;
}

.rules-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.rule-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #e6f7ff;
  color: #1890ff;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20rpx;
}

.rule-text {
  font-size: 28rpx;
  color: #333;
}

.action-buttons {
  padding: 20rpx;
}

.primary-btn {
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.secondary-btn {
  background-color: #fff;
  color: #1890ff;
  font-size: 32rpx;
  border: 2rpx solid #1890ff;
  border-radius: 12rpx;
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.error-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.error-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.retry-btn {
  background-color: #1890ff;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 40rpx;
  border-radius: 8rpx;
}
</style>